<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="mvvm">
        <title>Build MVVM-Bound Forms | Kendo UI MVVM</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to build MVVM-bound forms with Kendo UI.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("framework/mvvm/tutorials/forms.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//framework/mvvm/tutorials/forms.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="build-mvvm-bound-forms"><a href="#build-mvvm-bound-forms">Build MVVM Bound Forms</a></h1>

<p>This article provides an in-depth look on collecting data from HTML forms using the <a href="/framework/mvvm/overview">Kendo UI framework MVVM features</a>.</p>

<h2 id="sample-case"><a href="#sample-case">Sample Case</a></h2>

<h3 id="create-the-initial-form"><a href="#create-the-initial-form">Create the Initial Form</a></h3>

<p>The example below demonstrates the markup that is to be used as a starting point for the implementation of the sample case in this tutorial.</p>

<h6>Example</h6>

<pre><code>&lt;div class="form"&gt;
  &lt;dl&gt;
    &lt;dt&gt;Type&lt;/dt&gt;
    &lt;dd&gt;
        &lt;select id="type"&gt;
            &lt;option value="food"&gt;Food&lt;/option&gt;
            &lt;option value="shopping"&gt;Shopping&lt;/option&gt;
            &lt;option value="bills"&gt;Bills&lt;/option&gt;
        &lt;/select&gt;
    &lt;/dd&gt;
    &lt;dt&gt;Merchant&lt;/dt&gt;
    &lt;dd&gt;&lt;input id="merchant" type="text" /&gt;&lt;/dd&gt;
    &lt;dt&gt;Amount&lt;/dt&gt;
    &lt;dd&gt;&lt;input id="amount" type="text" /&gt;&lt;/dd&gt;
  &lt;/dl&gt;
    &lt;dt&gt;&amp;nbsp;&lt;/dt&gt;
    &lt;dd&gt;&lt;button id="create" class="k-button"&gt;Add&lt;/button&gt;&lt;/dd&gt;
&lt;/div&gt;

&lt;table id="expenses"&gt;

&lt;table&gt;
</code></pre>

<h3 id="elaborate-with-mvvm"><a href="#elaborate-with-mvvm">Elaborate with MVVM</a></h3>

<p>To start using the MVVM pattern, you need to create a View-Model. A View-Model is an observable object. This object has properties and methods. Each property will be bound to something in the HTML. In MVVM, this binding is a two-way one, meaning that if the binding changes on the UI, the model also changes, and vice versa.</p>

<h4>Declare the ViewModel</h4>

<p>The example below demonstrates what the <code>ViewModel</code> looks like.</p>

<h6>Example</h6>

<pre><code>viewModel = kendo.observable({

    // the expenses array will hold the grid values
    expenses: [],

    // the type array populates the drop down
    type: [
        { name: "Food", value: "food"},
        { name: "Merchant", value: "merchant"},
        { name: "Bills", value: "bills" }
    ],

    // expenseType holds the currently selected value of the dropdown list
    expenseType: "food",

    // the values are bound to the merchant and amount fields
    merchant: null,
    amount: null,

    // the event is to execute on clicking the Add button
    create: function(e) {

        // add the items to the array of expenses
        this.get("expenses").push({Type: this.get("expenseType"),
                                   Merchant: this.get("merchant"),
                                   Amount: this.get("amount")});

        // reset the form
        this.set("expenseType", "food");
        this.set("merchant", "");
        this.set("amount", "");
    }
});

// apply the bindings
kendo.bind(document.body.children, viewModel);
</code></pre>

<h4>Walkthrough of the ViewModel Declaration</h4>

<ul>
<li>
<code>expenses</code>—Instead of using a plain HTML table to display the values from the sample input form, the example is going to use a Kendo UI Grid. The <code>expenses</code> array holds the values that the grid will use as its source.</li>
<li>
<code>type</code>—Instead of defining the items inline with options in the HTML, you are going to bind a <code>select</code> element to this array and also apply some Kendo UI magic to the drop-down.</li>
<li>
<code>expenseType</code>—This variable will be bound to whatever value is currently selected in the above mentioned dropdown.</li>
<li>
<code>merchant</code>—It is bound to the value of the merchant input box.</li>
<li>
<code>amount</code>—Bound to the value of the amount input box.</li>
<li>
<code>create</code>—This is the event that will be fired by the <strong>Add</strong> button. In the event-handler, you are going to add the item to the expenses array and reset the form.</li>
<li>
<code>kendo.bind(document.body.children, viewModel)</code>—The statement that initializes the binding between the View-Model and the relevant HTML.</li>
</ul>

<h4>Declare the View</h4>

<p>Now, you need to make some changes in the markup. Take it element by element and examine the bindings, as shown below.</p>

<p>As demonstrated in the example below, the <code>select</code> element now has no options. Instead, it has some new <code>data</code> attributes.</p>

<h6>Example</h6>

<pre><code>&lt;select data-role="dropdownlist" data-bind="source: type, value: expenseType" data-text-field="name" data-value-field="value"&gt;
&lt;/select&gt;
</code></pre>

<p>The <code>merchant</code> input has a new binding. The <code>data-bind=”value: merchant”</code> says that you want to bind the value of this input to the <code>merchant</code> variable in the View-Model. A <code>k-textbox</code> CSS class was also added to it to style it using <a href="/styles-and-layout/appearance-styling">Kendo UI styles</a>.</p>

<h6>Example</h6>

<pre><code>&lt;dt&gt;Merchant&lt;/dt&gt;
&lt;dd&gt;
    &lt;input id="merchant" type="text" class='k-textbox' data-bind="value: merchant" /&gt;
&lt;/dd&gt;
</code></pre>

<p>The <code>amount</code> input has two new bindings: <code>data-role</code> and <code>data-bind</code>. The <code>data-role</code> sets the input to a <a href="/web/numerictextbox/overview">Kendo UI NumericTextBox</a> and the <code>data-bind</code> binds the value to our <code>amount</code> variable.</p>

<h6>Example</h6>

<pre><code>&lt;dt&gt;Amount&lt;/dt&gt;
&lt;dd&gt;
    &lt;input data-role="numerictextbox" data-bind="value: amount" id="amount" type="text" /&gt;
&lt;/dd&gt;
</code></pre>

<p>The <code>Add</code> button has only one new change. It now has a <code>data-bind="click: create"</code>. This binds its click event to the <code>create</code> function in the view model.</p>

<h6>Example</h6>

<pre><code>&lt;button id="create" data-bind="click: create" class="k-button"&gt;Add&lt;/button&gt;
</code></pre>

<p>This last one is the line that creates the <a href="/controls/data-management/grid/walkthrough">Kendo UI Grid widget</a>.</p>

<h6>Example</h6>

<pre><code>&lt;div data-role="grid" data-sortable="true" data-bind="source: expenses"
     data-columns='["Type", "Merchant", "Amount"]' &gt;&lt;/div&gt;
</code></pre>

<h3 id="get-the-final-result"><a href="#get-the-final-result">Get the Final Result</a></h3>

<p>Here is the finished product. Kendo UI bindings are keeping the UI and the model in sync as changes are made.</p>

<h6>Example</h6>

<pre data-lang="html"><code>&lt;div class="form"&gt;       
  &lt;dl&gt;
    &lt;dt&gt;Type&lt;/dt&gt;
    &lt;dd&gt;&lt;select data-role="dropdownlist" data-bind="source: type, value: expenseType" data-text-field="name" data-value-field="value"&gt;&lt;/select&gt;&lt;/dd&gt;
    &lt;dt&gt;Merchant&lt;/dt&gt;
    &lt;dd&gt;&lt;input id="merchant" type="text" class='k-textbox' data-bind="value: merchant" /&gt;&lt;/dd&gt;
    &lt;dt&gt;Amount&lt;/dt&gt;
    &lt;dd&gt;&lt;input data-role="numerictextbox" data-bind="value: amount" id="amount" type="text" /&gt;&lt;/dd&gt;
  &lt;/dl&gt;
    &lt;dt&gt;&amp;nbsp;&lt;/dt&gt;
    &lt;dd&gt;&lt;button id="create" data-bind="click: create" class="k-button"&gt;Add&lt;/button&gt;&lt;/dd&gt;
&lt;/div&gt;

&lt;div class="grid" data-role="grid" data-sortable="true" data-bind="source: expenses" data-columns='["Type", "Merchant", "Amount"]' data-scrollable="false"&gt;&lt;/div&gt;

&lt;script&gt;

var viewModel = kendo.observable({

    // the expenses array will hold the grid values
    expenses: [],

    // the type array populates the drop down
    type: [{ name: "Food", value: "food"}, { name: "Clothing", value: "clothing"}, { name: "Bills", value: "bills" }],

    // the expenseType holds the currently selected value of the dropdown list
    expenseType: "food",

    // the values are bound to the merchant and amount fields
    merchant: null,
    amount: null,

    // the event executes on clicking the Add button
    create: function(e) {         
        // add the items to the array of expenses
        this.get("expenses").push({Type: this.get("expenseType"), Merchant: this.get("merchant"), Amount: this.get("amount")});

        // reset the form
        this.set("expenseType", "food");
        this.set("merchant", "");
        this.set("amount", "");
    }

});

// apply the bindings
kendo.bind(document.body.children, viewModel);

&lt;/script&gt;

&lt;style&gt;

.form
{
    padding: 0 2em;
}

.form:after
{
    content: "";
    display: block;
    clear: both;
}

dl, dt, dd
{
    margin: 0;
    padding: 0;
}

dt, dd
{
    float: left;
    margin-top: 1em;
}

dt
{
    clear: left;
    text-align: right;
    width: 6em;
    margin-right: 2em;
    line-height: 2.4;
}

.grid {
    margin: 2em;
}

&lt;/style&gt;
</code></pre>

<p>Not only does MVVM keep you from having to worry about many of the manual details, but also dramatically simplifies your code, so that in your JavaScript you are only working with model objects. The DOM simply reflects the changes that you make to the model.</p>

<p>To explore the features of Kendo UI MVVM in detail, visit the <a href="/framework/mvvm/overview">MVVM Overview article</a>.</p>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Articles and how-to examples on Kendo UI MVVM:</p>

<ul>
<li><a href="/framework/mvvm/overview">MVVM Overview</a></li>
<li><a href="/framework/mvvm/observableobject">ObservableObject Overview</a></li>
</ul>

<p>For detailed information on the bindings Kendo UI MVVM supports, refer to the section about <a href="/framework/mvvm/bindings/attr">Kendo UI MVVM bindings</a>.</p> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

